<template>
	<view class="t_contianer">
		<scroll-view scroll-y="true" class="scroll_view">
			<view class="navigation" :style="'padding-top:'+ statusbarHeight + 'rpx'">
				<image @click="pageBack" class="back_icon" src="/static/images/left.png" mode="scaleToFill"></image>
				<text>缴费中心</text>
			</view>
			<view class="header">
				<view class="user_box">
					<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;">
						<view class="info_item"><text class="info_title">姓名</text><text class="info_val">{{!certUserInfo.isCert?certUserInfo.userName:empName}}</text></view>
						<view @click="jumpJF" class="history_btn">缴费记录</view>
					</view>
					<view class="info_item">
						<text class="info_title">身份证</text><text class="info_val">{{!certUserInfo.isCert?certUserInfo.idCard:'暂未绑定身份证'}}</text>
					</view>
				</view>
			</view>
			<view class="change_box">
				<view class="change_org">
					<view class="org_change_btn">
						<view class="org_name">{{(Inv==0?mySchools[mySchCurrent]:qingSchools[schoolsCurrent])?(Inv==0?mySchools[mySchCurrent]:qingSchools[schoolsCurrent]):'未绑定人员信息'}}</view>
						<picker @change="_SchoolsChange" :value="Inv==0?mySchCurrent:qingStudents" :range="Inv==0?mySchools:qingSchools">
							<view class="change_btn">
								<text>切换</text>
								<image class="change_icon" src="/static/images/right.png" mode="scaleToFill"></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="user_chenge">
					<view :class="['user_chenge_item',Inv==0?'user_chenge_active':'user_chenge_notactive']" @click="changeTab(0)">
						个人缴费
					</view>
					<view :class="['user_chenge_item',Inv==1?'user_chenge_active':'user_chenge_notactive']" @click="changeTab(1)">
						亲友缴费
					</view>
				</view>
			</view>
			<view class="item_con" v-show="Inv == 0">
				<view class="apply_item" v-for="(item, index) in list1" :key="index">
					<custom-card>
						<view class="apply_header">
							<view class="apply_type">
								<text>{{item.itemName}}</text>
							</view>
							<view class="apply_result">
								<view class="to_payment_btn" @click="jumpToChange(item)">
									前往缴费
								</view>
							</view>
						</view>
						<view class="apply_start_and">
							缴费时间: {{item.effectiveStartTime}} 至 {{item.effectiveEndTime}}
						</view>
					</custom-card>
				</view>
				<noContent v-if="list1.length == 0" noContent="目前还没有当前月份缴费项!"></noContent>
			</view>
			<view class="item_con" v-show="Inv == 1">
				<view class="date_box">
					<picker :value="stuCurrent" :range="qingStudents" @change="_qingStudentsChange">
						<view class="date_chang" v-if="qingStudents.length>0">
							<text>当前亲友：{{qingStudents[stuCurrent]}} </text>
							<image class="down_icon" src="/static/images/down.png" mode="scaleToFill"></image>
						</view>
						<view v-else></view>
					</picker>
					<view class="apply_times">
						当前共绑定 {{qingStudents.length}} 位亲友
					</view>
				</view>
				<view class="apply_item" v-for="(item, index) in list2" :key="index">
					<custom-card>
						<view class="apply_header">
							<view class="apply_type">
								<text>{{item.itemName}}</text>
							</view>
							<view class="apply_result">
								<view class="to_payment_btn" @click="jumpToChange(item)">
									前往缴费
								</view>
							</view>
						</view>
						<view class="apply_start_and">
							缴费时间: {{item.effectiveStartTime}} 至 {{item.effectiveEndTime}}
						</view>
					</custom-card>
				</view>
				<noContent v-if="list2.length == 0" noContent="目前还没有当前月份缴费项!"></noContent>
			</view>
		</scroll-view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<tmcModal
		  :isShow="showMcModal1"
		  :content="content1"
		  :title="title1"
		  :okBtn="okBtn1"
		  :showCancel="false"
		  @ok="queren"
		></tmcModal>
	</view>
</template>

<script>
	import {
		getPayItem,
		getPaySubject,
		queryStudentCard,
		queryStudentCardBalance,
		findUserByIdCard
	} from '../../common/api/index.js';
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	import {
		dateFtt,
		_showLoading
	} from '../../common/js/util.js'
	import noContent from '../../components/no-content.vue'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		components: {
			noContent,
			mcModal,
			tmcModal
		},
		computed: {
			getTimeFormat(date) {
				return function(date) {
					 return date;
				}
			}
		},
		onLoad: function(option) {
			this.certUserInfo = JSON.parse(option.certUserInfo)
			this.statusbarHeight = uni.getStorageSync('SET_STATUS_BAR') * 2
		},
		onShow: function() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上')
					this.portalCode = 'POC_APP_ANDRIOD'
					break;
				case 'ios':
					console.log('运行iOS上')
					this.portalCode = 'POC_APP_APPLE'
					break;
				default:
					console.log('运行在开发者工具上')
					break;
			}
			this._queryStudentCard()
		},
		data() {
			return {
				statusbarHeight: 45,
				Inv: 0,
				objParams: {},
				orgName: '',
				certUserInfo: {},
				orgId: '',
				empName: '',
				empId: '',
				idCard: '',
				deptName: '',
				qingOrgId: '',
				list1: [],
				list2: [],
				portalCode: '',
				showFlag: false,
				stuList: [],
				geList: [],
				qingList: [],
				mySchCurrent: 0,
				stuCurrent: 0,
				schoolsCurrent: 0,
				mySchools: [],
				qingSchools: [],
				qingStudents: [],
				showMcModal: false,
				content: '',
				title: '',
				okBtn: '',
				jumpTxt: false,
				content1: '',
				title1: '',
				showMcModal1: false
			}
		},
		methods: {
			queren() {
				this.showMcModal1 = false;
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				if(this.jumpTxt) {
					this.showMcModal = false
					uni.navigateTo({
						url: '../car/bind'
					})
				} else {
					this.showMcModal = false
				}
			},
			showTxt(title, content) {
				console.log(title)
				console.log(content)
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			_queryStudentCard() {
				let s_userId = uni.getStorageSync('s_userId')
				queryStudentCard({
					userId: s_userId
				}).then(res => {
					if (res.code == 0) {
						this.stuList = res.data
						let geList = res.data.filter(item => item.bindType == 0 && item.studentCards.length != 0)
						this.geList = geList
						this.qingList = res.data.filter(item => item.bindType == 1)
						if (geList.length > 0) {
							this.empId = geList[0].studentCards[0].empId
							this.orgName = geList[0].studentCards[0].orgName
							this.orgId = geList[0].studentCards[0].orgId
							this.empName = geList[0].studentCards[0].empName
							this.deptName = geList[0].studentCards[0].deptName
							this.idCard = geList[0].studentCards[0].idCardNo
						}
						console.log(this.idCard)
						console.log(geList)
						if (this.qingList.length > 0) this.qingOrgId = this.qingList[0].studentCards[0].orgId

						this._loadSchoolAndStu()
					} else {
						this.geList = []
						this.qingList = []
					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			_qingStudentsChange(e) {
				this.stuCurrent = e.target.value
			},
			_SchoolsChange(e) {
				if (this.Inv === 0) this._mySchoolsChange(e)
				else this._qingSchoolsChange(e)
			},
			_qingSchoolsChange(e) {
				const index = e.target ? e.target.value : e
				const schools = this.qingList.filter(item => this.qingSchools[index] === item.studentCards[0].orgName)
				let students = []
				this.schoolsCurrent = index
				if (schools.length !== 0) {
					this.qingOrgId = schools[0].studentCards[0].orgId
					schools.forEach((item) => {
						students.push(item.studentCards[0].empName)
					})
					this.qingStudents = [...new Set(students)]
					this.stuCurrent = 0
					this._getPaySubject()
				}
			},
			_mySchoolsChange(e) {
				const index = e.target ? e.target.value : e
				const schools = this.geList.filter(item => this.mySchools[index] === item.studentCards[0].orgName)
				this.mySchCurrent = index
				if (schools.length !== 0) {
					this.orgId = schools[0].studentCards[0].orgId
					this._getPaySubject()
				}
			},
			_loadSchoolAndStu() {
				let students = [],
					schools = [],
					mySchools = []
				if (this.qingList.length > 0) {
					this.qingList.forEach((item) => {
						schools = [...schools, item.studentCards[0].orgName]
					})
				}
				if (this.geList.length > 0) {
					this.geList.forEach((item) => {
						mySchools = [...mySchools, item.studentCards[0].orgName]
					})
				}
				this.mySchools = [...new Set(mySchools)]
				this.qingSchools = [...new Set(schools)]
				this.changeTab(0)
			},
			jumpJF() {
				if (this.empId == undefined) {
					this.title = '操作提示'
					this.content = '请先绑定学生'
					this.okBtn = '去绑定'
					this.jumpTxt = true
					this.showMcModal = true
				} else {
					let stulist = [];
					this.stuList.forEach((item)=>{
						stulist.push({
							orgId: item.studentCards[0].orgId,
							empId: item.studentCards[0].empId
						})
					})
					uni.navigateTo({
						url: './jfRecode?stulist=' + JSON.stringify(stulist)
					})
				}

			},
			_getPaySubject() {
				this.list1 = []
				this.list2 = []
				_showLoading('加载中...')
				// #ifdef H5
				getPaySubject({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.length == 0) {
							this.title = '操作提示'
							this.content = '该机构不支持缴费功能~'
							this.okBtn = '确定'
							this.jumpTxt = false
							this.showMcModal = true
						} else {
							this.list1 = []
							this.list2 = []
							let list = res.data
							for (let i = 0; i < list.length; i++) {
								this._getPayItem(list[i])
							}
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-WEIXIN
				getPaySubject({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.length == 0) {
							this.title = '操作提示'
							this.content = '该机构不支持缴费功能~'
							this.okBtn = '确定'
							this.jumpTxt = false
							this.showMcModal = true
						} else {
							// this.list1 = []
							// this.list2 = []
							let list = res.data
							for (let i = 0; i < list.length; i++) {
								this._getPayItem(list[i])
							}
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-ALIPAY
				getPaySubject({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.length == 0) {
							this.title = '操作提示'
							this.content = '该机构不支持缴费功能~'
							this.okBtn = '确定'
							this.jumpTxt = false
							this.showMcModal = true
						} else {
							this.list1 = []
							this.list2 = []
							let list = res.data
							for (let i = 0; i < list.length; i++) {
								this._getPayItem(list[i])
							}
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef APP-PLUS
				getPaySubject({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.length == 0) {
							this.title = '操作提示'
							this.content = '该机构不支持缴费功能~'
							this.okBtn = '确定'
							this.jumpTxt = false
							this.showMcModal = true
						} else {
							this.list1 = []
							this.list2 = []
							let list = res.data
							for (let i = 0; i < list.length; i++) {
								this._getPayItem(list[i])
							}
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
			},
			_getPayItem(subject) {
				uni.showLoading({
					title: '加载中...'
				})
				// #ifdef H5
				getPayItem({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					subjectId: subject.subjectId,
					portalCode: 'POC_WX_OPENPLAFORM',
					typeId: subject.typeId
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data
						this.list.forEach(item => {
							item.effectiveEndTime = item.effectiveEndTime
							// item.effectiveEndTime = dateFtt('yyyy/MM/dd', item.effectiveEndTime)
							item.effectiveStartTime = item.effectiveStartTime
							// item.effectiveStartTime = dateFtt('yyyy-MM-dd', item.effectiveStartTime)
						})
						let listIndex = (this.Inv ? 'list2' : 'list1')
						this[listIndex] = [...this[listIndex], ...this.list.filter(item => item.isEffective == true)]
						// this.list1 = this.list.filter(item => item.isEffective == true)
						// this.list2 = this.list.filter(item => item.isEffective == false)
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-ALIPAY
				getPayItem({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					subjectId: subject.subjectId,
					portalCode: 'POC_ZFB_APPLET',
					typeId: subject.typeId
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data
						this.list.forEach(item => {
							// item.effectiveEndTime = dateFtt('yyyy-MM-dd', item.effectiveEndTime)
							// item.effectiveStartTime = dateFtt('yyyy-MM-dd', item.effectiveStartTime)
							item.effectiveEndTime = item.effectiveEndTime
							item.effectiveStartTime = item.effectiveStartTime
						})
						let listIndex = (this.Inv ? 'list2' : 'list1')
						this[listIndex] = [...this[listIndex], ...this.list.filter(item => item.isEffective == true)]
						// this.list1 = this.list.filter(item => item.isEffective == true)
						// this.list2 = this.list.filter(item => item.isEffective == false)
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-WEIXIN
				getPayItem({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					subjectId: subject.subjectId,
					portalCode: 'POC_WX_APPLET',
					typeId: subject.typeId
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data
						this.list.forEach(item => {
							item.effectiveEndTime = dateFtt('yyyy-MM-dd', item.effectiveEndTime)
							item.effectiveStartTime = dateFtt('yyyy-MM-dd', item.effectiveStartTime)
						})
						let listIndex = (this.Inv ? 'list2' : 'list1')
						this[listIndex] = [...this[listIndex], ...this.list.filter(item => item.isEffective == true)]
						// this.list1 = [...this.list1,...this.list.filter(item => item.isEffective == true)]
						// this.list2 = [...this.list2,...this.list.filter(item => item.isEffective == false)]
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef APP-PLUS
				getPayItem({
					orgId: this.Inv === 0 ? this.orgId : this.qingOrgId,
					subjectId: subject.subjectId,
					portalCode: this.portalCode,
					typeId: subject.typeId
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data
						this.list.forEach(item => {
							item.effectiveEndTime = dateFtt('yyyy-MM-dd', item.effectiveEndTime)
							item.effectiveStartTime = dateFtt('yyyy-MM-dd', item.effectiveStartTime)
						})
						let listIndex = (this.Inv ? 'list2' : 'list1')
						this[listIndex] = [...this[listIndex], ...this.list.filter(item => item.isEffective == true)]
						// this.list1 = this.list.filter(item => item.isEffective == true)
						// this.list2 = this.list.filter(item => item.isEffective == false)
						uni.hideLoading()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
			},
			changeTab(Inv) {
				this.Inv = Inv;
				// this._getPaySubject()
				if (Inv) {
					this._qingSchoolsChange(0)
				} else {
					this._mySchoolsChange(0)
				}
			},
			jumpToChange(obj) {
				console.log(obj)
				let stuInfo = {}
				if (!this.Inv) {
					console.log(123)
					console.log(this.idCard)
					if (this.idCard == '') {
						this.showTxt('温馨提示', '您好，当前机构下账户未绑定身份证，无法缴费')
						return
					}
					console.log(1231111)
					stuInfo = {
						idCard: this.idCard,
						orgId: this.orgId,
						empName: this.empName,
						empId: this.empId,
						deptName: this.deptName
					}
					console.log(stuInfo)
				} else if (this.Inv) {
					console.log(1233)
					let student = this.qingList.filter(item => this.qingStudents[this.stuCurrent] === item.studentCards[0].empName)[0]
						.studentCards[0]
					if (student.idCardNo == '') {
						this.showTxt('温馨提示', '您好，当前亲友未绑定身份证，无法缴费')
						return
					}
					stuInfo = {
						idCard: student.idCardNo,
						orgId: student.orgId,
						empName: student.empName,
						empId: student.empId,
						deptName: this.deptName
					}
				} else {
					console.log(123222)
				}
				this._submit(obj, stuInfo)
			},
			_submit(obj, stuInfo) {
				console.log(123)
				uni.navigateTo({
					url: './payment?obj=' + encodeURIComponent(JSON.stringify(obj)) + '&stuObj=' + encodeURIComponent(JSON.stringify(
						stuInfo))
				})
				// findUserByIdCard({
				// 	idCardNo: stuInfo.idCard,
				// 	orgId: stuInfo.orgId,
				// 	empName: stuInfo.empName
				// }).then(res => {
				// 	if(res.code == 0) {
				// 		this.stuObj = res.data;
				// 		uni.navigateTo({
				// 			url: './payment?obj=' + encodeURIComponent(JSON.stringify(obj)) + '&stuObj=' + encodeURIComponent(JSON.stringify(res.data))
				// 		})
				// 	} else {
				// 		uni.showModal({
				// 			title: '温馨提示',
				// 			content: `您好，${res.msg}！`,
				// 			showCancel: false,
				// 			confirmText: '确认'
				// 		});
				// 	}
				// }).catch(err => {
				// 	console.log(err)
				// })
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
		font-family: PingFang-SC-Medium, PingFang-SC;
	}

	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		height: 90rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		color: #FFF;
		z-index: 9999;
	}

	.back_icon {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		left: 12rpx;
	}

	.scroll_view {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}

	.header {
		width: 100vw;
		height: 378rpx;
		background-image: url('');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.user_box {
		position: absolute;
		bottom: 0;
		left: 32rpx;
		right: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 190rpx;
		background: linear-gradient(180deg, #F9FCFF 0%, #EDEFFF 100%);
		border-radius: 16rpx 16rpx 0 0;
		padding: 46rpx 32rpx;
		box-sizing: border-box;
	}

	.info_item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 10rpx 0;
	}

	.info_font {
		font-size: 28rpx;
		line-height: 40rpx;
		height: 40rpx;
	}

	.info_title {
		@extend .info_font;
		text-align: justify;
		width: 90rpx;
		display: inline-block;
		text-align: justify;
		vertical-align: top;
		color: #6B707A;

		&::after {
			display: inline-block;
			width: 100%;
			content: '';
			height: 0;
		}
	}

	.info_val {
		@extend .info_font;
		margin-left: 28rpx;
		color: #3C424F;
		font-weight: 600;
	}

	.history_btn {
		height: 52rpx;
		line-height: 52rpx;
		font-size: 28rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
		border: 1px solid #185AFF;
		color: #185AFF;
		padding: 0 34rpx;
	}

	.change_box {
		background-color: #185AFF;
		/* box-shadow: 0 16rpx 24rpx 0 rgba(0, 0, 0, 0.05); */
	}

	.change_org {
		padding: 32rpx;
		/* width: 100%; */
	}

	.org_change_btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 96rpx;
		background: rgba(255, 255, 255, 0.38);
		box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.28);
		border-radius: 8rpx;
		padding: 0 26rpx;
	}

	.org_name {
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 44rpx;
	}

	.user_chenge_content {
		content: '';
		display: block;
		width: 100%;
		height: 50%;
		position: absolute;
		z-index: 9;
	}
		
	.user_chenge {
		height: 80rpx;
		display: flex;
		position: relative;
		top: 0;
		
		&::after {
			@extend .user_chenge_content;
			background-color: #F2F2F2;
			bottom: 0;
		}
		
		&::before {
			@extend .user_chenge_content;
			background-color: #185AFF;
			top: 0;
		}
		
	}

	.user_chenge_item {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #FFF;
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
		z-index: 10;
		background-color: #185AFF;
	}

	.user_chenge_active {
		color: #185AFF;
		background-color: #F2F2F2;
		
		&:first-child {
			border-radius: 0 20rpx 0 0;
		}
		
		&:last-child {
			border-radius: 20rpx 0 0 0;
		}
		
	}

	.user_chenge_notactive:first-child {
		border-radius: 0 0 20rpx 0;
	}

	.user_chenge_notactive:last-child {
		border-radius: 0 0 0 20rpx;
	}

	.item_con {
		padding: 32rpx;
		height: calc(100vh - 618rpx);
		box-sizing: border-box;
		overflow-y: auto;
	}

	.top_desc1 {
		font-family: "PingFangSC";
		font-weight: 400;
		font-size: 34rpx;
		font-weight: 600;
		color: red;
	}

	.txtCon {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.apply_item {
		margin-bottom: 20rpx;
	}

	.apply_header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.apply_type {
		font-size: 32rpx;
		font-weight: 600;
		color: #3C424F;
		line-height: 44rpx;
	}

	.apply_result {
		height: 60rpx;
		background: #185AFF;
		border-radius: 4px;
		padding: 0 38rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFF;
		line-height: 60rpx;
	}

	.apply_start_and {
		font-size: 28rpx;
		color: #3C424F;
		line-height: 40rpx;
		padding: 40rpx 0 10rpx;
	}

	.apply_date {
		font-size: 24rpx;
		font-weight: 500;
		color: #9AA2B2;
		line-height: 34rpx;
	}

	.change_item {
		width: 50%;
		text-align: center;
	}

	.change_btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 52rpx;
		line-height: 52rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #E3E8FF 100%);
		border-radius: 32px;
		padding: 0 24rpx;
		color: #144DE8;
		font-size: 24rpx;
	}

	.change_icon {
		width: 32rpx;
		height: 32rpx;
	}

	.date_box {
		padding-bottom: 32rpx;
	}

	.date_chang {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		font-weight: 800;
		color: #3C424F;
		line-height: 42rpx;
	}

	.down_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.apply_times {
		margin-top: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #6B707A;
		line-height: 40rpx;
	}
</style>
